<template>
    <nav>
        <ul>
            <!-- 声明式导航 -->
            <router-link to="/films" tag="li" activeClass="myactive">
                <i class="iconfont icon-form" />
                <span>影片</span>
            </router-link>
            <router-link to="/cinema" tag="li" activeClass="myactive">
                <i class="iconfont icon-training" />
                <span>电影院</span>
            </router-link>
            <router-link to="/center" tag="li" activeClass="myactive">
                <i class="iconfont icon-smile" />
                <span>我的</span>
            </router-link>
        </ul>
    </nav>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.myactive {
    color: red;
}

nav {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 48px;
    background: white;
    ul {
        display: flex;
        margin: 0px;
        padding: 0px;
        border-top: 1px solid #eeeeee;
        li {
            flex: 1;
            list-style: none;
            text-align: center;
            line-height: 28px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
        }
        i {
            height: 20px;
        }
        span {
            font-size: 12px;
        }
    }
}
</style>
